<template>
	<view class="pageIndex">
		<view class="fixedBack"></view>
		<view class="fixedTop">
			<view class="nav">
				<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/logo.png" mode="scaleToFill">
				</image>
				<view class="item xz">视频 <text></text></view>
				<!-- #ifdef MP-TOUTIAO -->
				<view class="item" @tap="navigateTo('/pages/map/index')">地图</view>
				<!-- #endif -->
			</view>
			<view class="searchBar">
				<view class="left">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/search.png"
						mode="scaleToFill"></image>
					<input class="inp" placeholder="口令/钓点/主播" border="none" v-model="parameter.title"
						@confirm="confirm"></input>
					<view class="btn" @tap="confirm">搜索</view>
				</view>
				<view class="right">
					<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/local.png"
						mode="scaleToFill"></image>
						<!-- #ifdef MP-KUAISHOU -->
						<text>{{videoList[0] && videoList[0].city}}</text>
						<!-- #endif -->
						<!-- #ifdef MP-TOUTIAO -->
						<text>{{thisPosition}}</text>
						<!-- #endif -->
					
				</view>
			</view>
		</view>

		<view class="box">
			<view class="videoList">
				<view class="videoItem" v-for="(v,i) in videoList" :key="i" @tap="openLocation(v)">
					<view class="videoimg">
						<image :src="'https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/' + imglist[v.ind]"
							mode="scaleToFill">
						</image>
					</view>
					<view class="msg">
						<view class="top">
							<!-- <view class="name">
								<image src="../../static/img1.png" mode="scaleToFill"></image>
								<text>{{v.nickname}}</text>
							</view> -->
							<view class="position">
								{{v.city + " " + v.district}}
							</view>
						</view>
						<view class="bottom">
							<view class="score">
								<image v-for="v in 5" :key="v"
									src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/icon1.png"
									mode="scaleToFill"></image>
							</view>
							<view class="distance">
								<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/icon2.png"
									mode="scaleToFill"></image>
								<text>{{v.distance}}km</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 重新定位 -->
		<view class="relocation" @tap="relocation">
			<image src="https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/relocation.png" mode="scaleToFill">
			</image>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue'

	import {
		onLoad,
		onReachBottom,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	const {
		proxy
	} = getCurrentInstance()

	const value = ref('')
	const total = ref(0)
	const videoList = ref([])
	const parameter = ref({
		title: "", //true	string		口令/钓点/主播 搜索字段
		type: 3, //false	int		类型 1最新发布 2热门钓点 3离我最近
		longitude: "", //true	string		经度
		latitude: "", //true	string		纬度
		range: 50, //false	int		范围(示例10代表10公里)
		province: "", // 省
		city: "", // 市
		district: "", // 区
		page: 1, //true	int		当前页
		size: 10, //true	int		每页多少条
	})
	const thisPosition = ref("")
	const ad = ref()
	const imglist = ref(["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg",
		"11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg"
	])

	//获取个人信息
	const getUserInfo = async () => {
		const res = await proxy.$http("api/user/getUserInfo", {}, "GET")
		if (res.code == 200) {
			uni.setStorageSync("user", res.result);
		}
	}

	// 获取当前位置
	const getPosition = () => {
		uni.getLocation({
			type: 'gcj02',
			success: (res) => {
				console.log("res", res);
				thisPosition.value = res.city
				parameter.value.longitude = res.longitude
				parameter.value.latitude = res.latitude
				// parameter.value.longitude = 114.306574
				// parameter.value.latitude = 30.589376
				getSpotList()
			},
			fail: (err) => {
				console.log("err", err);
				uni.showToast({
					title: "获取位置失败",
					icon: 'none'
				})
			}
		});
	}

	// 钓点列表
	const getSpotList = async () => {
		const res = await proxy.$http("api/spot/getSpotList", parameter.value, "GET")
		// console.log(res);
		if (res.code == 200 && res.result.data.length) {
			res.result.data.map(v => {
				v.ind = Math.floor(Math.random() * 15)
			})
			videoList.value = [...videoList.value, ...res.result.data]
			total.value = res.result.total
		} else {
			uni.showToast({
				title: "未查询到匹配钓点",
				icon: 'none'
			})
		}
	}

	onLoad(() => {
		// // 创建实例
		// ad.value = tt.createRewardedVideoAd({
		// 	adUnitId: '0dxfiq0byhkbxccbm6'
		// });
		// // 监听错误
		// ad.value.onError(err => {
		// 	tt.hideLoading();
		// 	switch (err.errCode) {
		// 		case 1004:
		// 			// 无合适的广告
		// 			break;
		// 		default:
		// 			// 更多请参考错误码文档
		// 	}
		// });
		// // 监听视频播放完成
		// ad.value.onClose(data => {
		// 	tt.hideLoading();
		// 	if (data.isEnded) {
		// 		console.log('观看了', data.count, '个视频');
		// 	} else {
		// 		console.log('未观看完视频');
		// 	}
		// });

		// // 预加载资源
		// ad.value.load();
	})

	onMounted(() => {
		getPosition()
		if (uni.getStorageSync('token')) {
			getUserInfo()
		}
	})

	// 搜索标题
	const confirm = () => {
		total.value = 0
		videoList.value = []
		parameter.value.page = 1;
		getSpotList()
	}

	// 重新定位
	const relocation = () => {
		total.value = 0
		videoList.value = []
		parameter.value.page = 1;
		getPosition()
	}

	// 跳转导航
	const openLocation = (data) => {
		// #ifdef MP-TOUTIAO
		uni.navigateTo({
			url: `/pages/detail/index?id=${data.id}`
		})
		// #endif
		// #ifdef MP-KUAISHOU
		ks.openLocation({
			latitude: Number(data.latitude),
			longitude: Number(data.longitude),
			name: data.address,
			address: data.address,
			complete: function(res) {
				console.log('success', res);
			}
		});
		// #endif
	}

	onReachBottom(() => {
		if (videoList.value.length >= total.value) return;
		parameter.value.page += 1;
		getSpotList()
	})
</script>
<style scoped lang="scss">
	.pageIndex {
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;

		.fixedBack {
			position: fixed;
			top: 0;
			left: 0;
			width: 750rpx;
			height: 500rpx;
			background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/indexBack.png") no-repeat;
			background-size: 100%;
		}

		.fixedTop {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 9;
			width: 750rpx;
			background: url("https://miaoyao-oss.oss-cn-hangzhou.aliyuncs.com/goFishing/indexBack.png") no-repeat;
			background-size: 100%;
			padding: 0 32rpx;
			box-sizing: border-box;

			.nav {
				display: flex;
				align-items: center;
				width: 100%;
				height: 88rpx;

				image {
					width: 76rpx;
					height: 56rpx;
					margin-right: 32rpx;
				}

				.item {
					font-weight: 500;
					font-size: 28rpx;
					color: #434343;
					margin-right: 24rpx;
				}

				.xz {
					position: relative;
					font-weight: bold;
					font-size: 32rpx;
					color: #1F1F1F;

					text {
						display: block;
						width: 44rpx;
						height: 6rpx;
						background: #0041A0;
						border-radius: 3rpx 3rpx 3rpx 3rpx;
						position: absolute;
						bottom: 0;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}

			.searchBar {
				display: flex;
				align-items: center;
				width: 100%;
				height: 88rpx;

				.left {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 542rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #1F1F1F;
					padding: 0 6rpx 0 24rpx;
					box-sizing: border-box;

					// margin-right: 32rpx;
					image {
						width: 40rpx;
						height: 40rpx;
					}

					.inp {
						flex: 1;
						margin: 0 8rpx;
						font-weight: 500;
						font-size: 24rpx;

						.input-placeholder {
							font-weight: 500;
							font-size: 24rpx;
							color: #B6B6B6;
						}
					}

					.btn {
						width: 80rpx;
						height: 52rpx;
						line-height: 1;
						background: #1F1F1F;
						border-radius: 26rpx 26rpx 26rpx 26rpx;
						font-weight: bold;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 52rpx;
						text-align: center;
					}
				}

				.right {
					display: flex;
					align-items: center;
					justify-content: center;
					flex: 1;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 8rpx;
					}

					text {
						font-weight: bold;
						font-size: 28rpx;
						color: #1F1F1F;
					}
				}
			}
		}

		.box {
			position: absolute;
			top: 200rpx;
			z-index: 5;
		}

		.videoList {

			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-column-gap: 10rpx;
			grid-row-gap: 16rpx;
			padding-bottom: 20rpx;

			.videoItem {
				width: 338rpx;
				height: 536rpx;
				border-radius: 16rpx;
				background-color: #ffffff;
				overflow: hidden;

				.videoimg {
					width: 100%;
					height: 440rpx;

					image {
						width: 100%;
						height: 440rpx;
					}
				}

				.msg {
					width: 338rpx;
					height: 96rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					box-sizing: border-box;
					padding: 12rpx;

					.top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.name {
							display: flex;
							align-items: center;

							image {
								width: 40rpx;
								height: 40rpx;
								border-radius: 50%;
								margin-right: 4rpx;
							}

							text {
								font-weight: bold;
								font-size: 20rpx;
								color: #1F1F1F;
							}
						}

						.position {
							font-weight: 500;
							font-size: 16rpx;
							color: #1F1F1F;
						}
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.score {
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 24rpx;
								height: 24rpx;
							}
						}

						.distance {
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 4rpx;
							}

							text {
								font-weight: 500;
								font-size: 16rpx;
								color: #1F1F1F;
							}
						}
					}
				}
			}
		}

		.relocation {
			position: fixed;
			z-index: 99;
			right: 44rpx;
			bottom: 400rpx;

			image {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
</style>